<template>
  <div class="case-page">
    <!-- 医院名称 -->
    <h1 class="hospital-name" style="margin-bottom: 5px">{{ info.title }}</h1>
    <h1 class="hospital-name">查验申请单</h1>

    <!-- 患者基础信息 -->
    <div class="patient-info">
      <div class="info-item" style="width: 33.33%"><span>姓名：</span>{{ patient.name }} {{ patient.gender }}</div>
      <div class="info-item" style="width: 33.33%">
        <span>年龄：</span>{{ patient.age }}
      </div>
      <div class="info-item" style="width: 33.33%"><span>电话：</span>{{ patient.phone }}</div>
      <div class="info-item" style="width: 33.33%"><span>科室：</span>{{ patient.department }}</div>
      <div class="info-item" style="width: 33.33%">
        <span>诊号：</span>{{ patient.visitId }}
      </div>
      <div class="info-item" style="width: 33.33%"><span>类型：</span>初诊 普通</div>
    </div>

    <div class="case-info">
      <div class="info-item" style="display: flex; width: 100%">
        <span>初步诊断</span>：
        <ul style="width: calc(100% - 100px); margin-left: 10px">
          <li >
           双肺听诊呼吸音粗
          </li>
        </ul>
      </div>
    </div>


    <div class="case-info"> 
       <table class="cdp-table">
        <thead>
          <tr style="line-height: 2;">
            <th style="width: 35%;">项目</th>
            <th style="width: 12%;">频率</th>
            <th style="width: 12%;">周期</th>
            <th style="width: 12%;">总量</th>
            <th style="width: 29%;">备注</th>
          </tr>
        </thead>
        <tbody v-for="(item, index) in 1" :key="index" style="line-height: 2;">
         
          <tr>
            <td colspan="5">胸部CT</td>
          </tr>
           <tr >
            <td ></td>
            <td >1日1次</td>
            <td >10日</td>
            <td >10次</td>
            <td >无</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="case-info">
      <div class="info-item">
        <span style="width: 52px;">联系电话</span>：
        <div style="margin-left: 5px">{{ info.phone }}</div>
      </div>
      <div class="info-item">
        <span style="width: 52px;">联系地址</span>：
        <div style="margin-left: 5px">{{ info.address }}</div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="footer">
      <div class="info-item">
        <span style="width: 65px;">打印时间：</span> 
        <div style="margin-left: 5px">{{ footer.printTime }}</div>
      </div>
    </div>
    <!-- 底部信息 -->
    <div class="footer2">
      <div class="info-item"><span>医生姓名：</span><div class="img">
        <img  src="https://file.zhiyizhen.cn/files/2025/09/20/3698afe91586444a99c7265259706e43.png" alt="">
      </div></div>
      <div class="info-item"><span>开单日期：</span>2022-01-01</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'CasePage',
  props:['info'],
  setup() {
    // 病历数据（模拟从后端获取，此处为静态数据）
    const hospitalName = 'XXX医院';
    const patient = reactive({
      name: '张三',
      gender: '女',
      age: '23岁10月',
      phone: '17606523333',
      department: '内科',
      doctor: '张三三三',
      visitId: 'ZH20210101001',
      type: '初诊 普通',
      mainComplaint: '咳嗽',
      currentHistory: '无',
      pastHistory: '无',
      allergyHistory: '青霉素过敏',
      finalDiagnosis: '最终诊断',
      advice: [
        '多喝水多喝水多喝水多喝水多喝水',
        '多喝水多喝水多喝水多喝水多喝水',
      ],
    });
    const footer = reactive({
      amount: '100.00',
      finishTime: '2022-01-01 12:12:12',
      printTime: '2022-01-01 12:12:12',
      address: '浙江省杭州市余杭区设么路1000号',
      phone: '00-12345678',
    });

    return {
      hospitalName,
      patient,
      footer,
    };
  },
});
</script>

<style scoped lang="scss">
.case-page {
  font-family: Arial, sans-serif;
  padding: 34px 30px; background-color: #fff;
  height: 100%;
}

.hospital-name {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}

.patient-info,
.footer{
  display: flex;
  flex-wrap: wrap;
}
.patient-info,
.case-info {
  border-bottom: 2px solid rgba(0, 0, 0, 0.9);
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.info-item {
  font-size: 12px;
  width: 24%;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.footer {
  .info-item {
    display: flex;
    width: auto;
  }
}
.footer2 {
  width: 180px;
  margin-left: auto;
  .info-item {
    display: flex;
    width: 100%;
    align-items: center;
    span {
      display: block;
    }
    .img{
      width: 120px;
      height: 40px;
      display: flex;
      justify-content: center;
      img{
        height: 40px;
      }
    }
    
    margin-bottom: 10px;
  }
}
.case-info {
  .info-item {
    display: flex;
    width: 100%;
    span {
      width: 50px;
      display: block;
    }
  }
  .cdp-table{
    font-size: 12px;
    width: 100%;
    text-align:   left;
  }
}
.info-item span {
  text-align: justify;
  text-justify: inter-character;
  text-align-last: justify;
}

ul {
  list-style: none;
  padding: 0;
}
</style>
